<!-- 订单页面 -->
<template>
  <div class="order-box">
    <template v-if="!isHasResult">
      <ul>
        <li v-for="item in orderList"
            :key="item.Id">
          <div class="img-box">
            <img :src="item.GoodsImage"
                 alt="">
            <p>待支付</p>
          </div>

          <div class="content-box">
            <p class="title">{{item.GoodsName}}</p>
            <p class="price">￥{{item.AmountTotal}} <span>￥599</span></p>
            <p>下单时间：{{item.CreateDate.split("T")[0]}}</p>
            <p>订单编号：{{item.OrderNo}}</p>
            <p></p>
          </div>
        </li>
      </ul>
    </template>
    <template v-if="isHasResult">
      <no-result tips="空空如也~"
                 go-other="去商品中心看看"></no-result>
    </template>

  </div>
</template>

<script>
import NoResult from '@/components/NoResult/NoResult'
export default {
  data () {
    return {
      orderList: [],
      isHasResult: false
    };
  },

  components: {
    NoResult
  },

  computed: {},

  created () { },

  mounted () {
    this.getOrderList()
  },

  methods: {
    getOrderList () {
      let self = this
      axios.get('https://ys.lumingx.com/api/manage/getOrderList', {
        params: {
          pageNo: 1,
          pageSize: 50
        }
      }).then(function (response) {
        let res = response.data;
        if (res && res.success && res.data.length) {
          self.orderList = res.data;
          //  alert(JSON.stringify(self.orderList))
        } else {
          self.isHasResult = true
        }
        // console.log(this.itemList)
        console.log("1111111111111111")
        //  console.log(response);
        // let res = response.data;

        // if (res && res.success) {
        //   self.goodsList = res.data;
        // }

      }).catch(function (error) {
        console.log(error);
      });
    }
  }
}

</script>
<style lang='scss' scoped>
@import "@/assets/scss/base.scss";
.order-box {
  height: 100%;
  padding-bottom: 55px;
  ul {
    li {
      display: flex;
      background: $white;
      padding: 10px;
      border-bottom: solid 1px $bordercolor;
      .img-box {
        img {
          width: 130px;
          height: 130px;
        }
        p {
          text-align: center;
          font-size: 14px;
        }
      }

      .content-box {
        flex: 1;
        padding-left: 10px;
        p {
          margin-bottom: 5px;
        }
        .title {
          font-size: 14px;
          @include no-wrap-multi(2);
        }
        .price {
          color: $deepyellow;
          font-size: 14px;
          span {
            text-decoration: line-through;
            font-size: 12px;
            color: $grey;
            margin-left: 10px;
          }
        }
      }
    }
  }
}
</style>